<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_事件监听</title>
</head>
<body>
    <button onclick="alert('按钮1被点击了')">按钮1</button>
    <button id="id2">按钮2</button>
    <hr>
    <h4>迪丽热巴</h4>
    <span>开始推理吧</span>
    <h4>超级好看！</h4>
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque eius expedita itaque mollitia quam quidem
            vero voluptas! Blanditiis consequatur debitis dolorum facilis fugiat impedit in perferendis praesentium.
            Quaerat sapiente, voluptatibus.
        </div>
        <div>Eos, eveniet ex hic in incidunt ipsam molestiae pariatur possimus rem vitae. Aliquid blanditiis doloribus
            eum possimus, quibusdam saepe unde vitae? Adipisci alias aliquid doloremque error laudantium molestiae neque
            nulla.
        </div>
        <div>Dignissimos laudantium neque quidem? Aliquid architecto assumenda, cupiditate dolores ducimus eaque enim
            eveniet fuga impedit iure maiores nemo possimus quaerat, quasi quis. Consectetur dolorum eos maxime odio
            sapiente, sunt velit.
        </div>
        <div>A accusantium adipisci amet architecto aut consectetur doloribus eos facilis harum incidunt, labore
            molestiae pariatur qui quia quibusdam ratione, unde! Ad deserunt eum excepturi expedita iure libero minus
            optio voluptatem?
        </div>
        <div>Assumenda, cupiditate sequi. Aspernatur at blanditiis consectetur delectus dicta dolorem ducimus est ex
            facilis fugit hic, in ipsam labore laborum quidem suscipit temporibus ullam velit vero voluptas. Atque,
            dicta, maiores?
        </div>
        <div>Accusamus ad animi doloremque eos ipsam magnam odio, odit sapiente sequi soluta temporibus vero. Culpa
            cumque dolores esse incidunt ipsa neque obcaecati officiis possimus repudiandae sequi! Amet facilis illum
            nobis.
        </div>
        <div>Aut, cum debitis fuga fugiat maiores possimus praesentium quae quasi quo unde? Animi aut consectetur culpa,
            cum cupiditate, delectus doloremque dolorum exercitationem iste itaque molestiae mollitia officiis
            perferendis, rerum vero.
        </div>
        <div>Aliquam, consequuntur dolor labore libero maiores quae quasi tempora tempore! Aliquid atque autem corporis,
            doloremque eos error est fuga ipsa nesciunt obcaecati officia officiis praesentium repellat rerum tempora.
            Magnam, nobis!
        </div>
        <div>Blanditiis delectus doloribus ducimus eaque exercitationem fugit hic illo ipsum laudantium libero minus
            natus praesentium rem, repellendus veniam voluptatibus voluptatum? Accusantium aliquid deserunt dolor error
            eum iste iure labore quibusdam?
        </div>
        <div>Aut nobis quia quisquam veritatis. Accusamus, ad adipisci consectetur consequatur dicta ea, eaque eveniet
            excepturi illo laboriosam maxime odio officiis vel voluptates voluptatum! Blanditiis distinctio doloremque
            ducimus, necessitatibus nemo perspiciatis.
        </div>
        <div>Atque eum nobis nulla! Ipsum, nihil possimus? Accusamus, dolorem necessitatibus? Ducimus enim eveniet
            exercitationem ipsum laboriosam natus nisi odio possimus quidem! Commodi cum, dignissimos pariatur
            recusandae repellendus sapiente similique tenetur.
        </div>
        <div>Architecto, at corporis, cupiditate deleniti ea et excepturi hic incidunt ipsum iure libero magnam minima
            nihil nisi nobis, nostrum optio perferendis provident quaerat quia quos sapiente sunt totam voluptas
            voluptates.
        </div>
        <div>Ea eaque enim numquam omnis repudiandae! Esse eum harum maiores minus nihil rem temporibus voluptatem
            voluptates. Asperiores dolorum earum eveniet explicabo illo incidunt magnam nulla praesentium quisquam
            repudiandae, suscipit vel.
        </div>
        <div>Alias aspernatur aut deserunt doloribus eius eligendi enim eos expedita fugit, id ipsam libero magnam natus
            nemo nesciunt nulla numquam odio odit officiis praesentium, quae quas ratione saepe suscipit unde?
        </div>
        <div>Accusantium aliquid animi consectetur dolor, doloremque ea est fugiat inventore ipsum minus optio quo
            tempore, velit! Ad cumque doloribus ducimus, eos, fugit iure maiores molestiae nemo qui quo sit voluptates?
        </div>
        <div>Architecto atque dicta dolorum eaque facere harum illum laudantium minima mollitia, odit officia officiis
            optio quia quibusdam, quis quo quos reiciendis repellendus similique sint tempore velit voluptatibus. Dolor,
            quibusdam, quis.
        </div>
        <div>Aliquid ex illo praesentium quas vero. Accusantium animi cum cumque deserunt excepturi, impedit, laboriosam
            nisi officia, porro provident quas quibusdam repellat repudiandae sed similique soluta unde vero vitae
            voluptas voluptates?
        </div>
        <div>Deserunt eligendi modi nisi soluta voluptatibus? Amet consectetur dignissimos ducimus earum fuga ipsam
            molestias nesciunt, numquam placeat quisquam sint temporibus, voluptas voluptatum! Consequuntur eaque error
            magnam nihil non quos, voluptatem!
        </div>
        <div>Assumenda beatae deserunt distinctio dolorem eveniet hic, ipsam itaque laborum laudantium nihil obcaecati
            omnis perspiciatis sint unde voluptas voluptatibus voluptatum. Commodi consectetur debitis deleniti eaque
            ipsum odio provident quas sed.
        </div>
        <div>Accusamus assumenda beatae commodi consectetur deserunt esse est et explicabo facilis maxime mollitia
            necessitatibus, nemo nobis numquam obcaecati pariatur provident ratione recusandae repellendus similique
            sint soluta sunt totam vel voluptatum?
        </div>
        <div>A ab, aliquid assumenda corporis dolorem eveniet excepturi, maxime modi neque non perferendis saepe ut vel.
            Beatae consectetur eligendi esse facere id magni praesentium reprehenderit, rerum saepe sint. Alias, magni!
        </div>
        <div>Consectetur culpa cupiditate hic ipsum nam sed tempora. A blanditiis consectetur, dolores ea eaque esse
            expedita explicabo iure laudantium mollitia natus non officia quibusdam quis rerum saepe tempore ullam
            voluptates?
        </div>
        <div>Alias aliquam aperiam aut cumque dolor dolorem est hic in ipsa iste, magnam neque nostrum officia
            perferendis possimus quas saepe totam vel. Adipisci at consequuntur cupiditate libero quisquam suscipit
            voluptate?
        </div>
        <div>Delectus expedita magnam maiores modi natus nemo, quibusdam. Accusamus cumque deserunt distinctio et
            expedita fugiat in inventore ipsum laborum modi, molestias non numquam obcaecati odit qui quia rerum saepe,
            veniam!
        </div>
        <div>Autem dolores labore necessitatibus! Consequuntur, cum ea harum, id ipsa iure magni molestias nemo nihil
            nostrum perspiciatis porro rem, repudiandae tempora totam vel velit. Asperiores error fuga ipsam omnis
            voluptas.
        </div>
        <div>A ad beatae dignissimos eveniet necessitatibus odio possimus, quisquam voluptas? Architecto at cumque esse
            eum, incidunt, iusto laboriosam laborum magni modi molestiae mollitia possimus, quaerat quam sint sunt
            voluptate voluptatum.
        </div>
        <div>Aliquam animi atque aut autem consequuntur culpa dicta ea eius explicabo inventore laudantium, libero
            molestiae molestias nemo nihil optio perferendis possimus quasi quisquam reiciendis repellat saepe sint
            soluta sunt voluptatibus.
        </div>
        <div>Beatae delectus, dicta dolor doloremque dolores non nostrum officiis quas quo, rerum sapiente tenetur ullam
            vel! Ad beatae cumque eligendi fugiat inventore laudantium mollitia, nisi odit omnis repellendus unde
            veniam!
        </div>
        <div>Amet assumenda consectetur, consequatur et excepturi laboriosam magnam minus nihil quaerat quod sapiente
            sed sunt tenetur totam, ullam? Autem cumque eligendi facilis itaque nobis nulla porro sapiente, sed sequi
            vero!
        </div>
        <div>A at doloremque libero repudiandae rerum sed similique ullam. Accusantium deserunt dolores incidunt
            laudantium libero, modi molestiae nobis, porro quas quibusdam quisquam ratione temporibus ullam unde vero!
            Facilis, molestiae vitae!
        </div>
        <div>Alias aperiam assumenda delectus dicta doloribus dolorum est et exercitationem illum ipsa ipsam iusto
            molestias mollitia nesciunt, nobis odio porro, ratione reiciendis reprehenderit rerum similique sint sit vel
            voluptate voluptatem!
        </div>
        <div>Animi aperiam aspernatur assumenda aut beatae consequuntur deserunt dignissimos, enim est expedita
            explicabo facilis ipsum labore, libero nam neque optio praesentium provident quis recusandae sed sint,
            voluptas voluptate? Labore, voluptatum!
        </div>
        <div>Alias eaque id illo ipsam minus nemo nobis! Aliquam asperiores assumenda, deleniti dicta dolor dolorum
            ducimus error facilis, incidunt maiores, molestias neque non obcaecati placeat quidem quisquam sed unde vel!
        </div>
        <div>Accusamus debitis error id, in, itaque minima mollitia nesciunt odit omnis quasi quidem reiciendis sit
            voluptate. A assumenda dignissimos eos tenetur totam! Aspernatur, cum facere fugiat officia porro quo
            repellat.
        </div>
        <div>Consequuntur debitis dolor dolore eius eligendi excepturi, fugit ipsam iste nemo nihil quaerat vel
            voluptate voluptates. Accusantium consectetur dolorem enim est maxime necessitatibus porro, reiciendis
            totam. Ad atque tempora tenetur!
        </div>
        <div>Accusantium atque dicta eaque esse harum itaque maxime sunt voluptatum. Accusantium aspernatur atque cumque
            cupiditate deleniti eligendi explicabo laudantium nisi quia quis repellendus, reprehenderit similique sit,
            tempora totam unde voluptatem?
        </div>
        <div>Aliquid aperiam corporis, ducimus eos itaque quibusdam quis repellendus repudiandae suscipit veritatis.
            Atque corporis cum dolorem eaque est molestias pariatur ratione. Aspernatur dicta doloribus id iste possimus
            quod sequi tempora.
        </div>
        <div>Facere fugiat impedit laborum maiores natus velit. Ab accusamus dignissimos enim exercitationem ipsam
            maiores minus, perspiciatis quam quibusdam quis quo, reiciendis rerum sapiente sed, soluta tempora vel velit
            veniam voluptatem?
        </div>
        <div>A ab atque consectetur distinctio dolores doloribus excepturi facilis hic incidunt magnam, minima, minus
            nam necessitatibus obcaecati odio provident, quaerat quas quia ratione reprehenderit suscipit unde ut velit
            veniam voluptate.
        </div>
        <div>Eos, fuga, molestias! Distinctio eaque illo ipsa laudantium minus nihil nostrum quos. Adipisci aliquid
            asperiores deleniti dolore doloribus excepturi illo incidunt itaque nesciunt numquam odio qui reiciendis,
            sint temporibus veniam.
        </div>
        <div>Accusantium amet architecto aspernatur at debitis deserunt eaque enim eos error eum illo libero, minus
            molestiae officia placeat quaerat quasi quia quidem quisquam rem sed, sit tempore temporibus, ullam
            veritatis!
        </div>
        <div>Accusamus, aliquid consequatur dicta dolor dolorem eaque facere laboriosam omnis quas quia quisquam quod
            voluptate? Aliquid at blanditiis distinctio facere impedit maiores odio perferendis quasi quia sapiente,
            sequi ullam voluptate!
        </div>
        <div>A ab aliquid, amet architecto deleniti eaque exercitationem id illum impedit ipsam itaque modi molestiae
            molestias neque quae quidem, sed sint vel velit voluptatibus. A aliquid iste odio quaerat quos.
        </div>
        <div>At atque facilis id, incidunt nobis non sunt! Assumenda atque error eveniet illo ipsam magnam, natus
            praesentium sapiente voluptates voluptatum! Culpa laudantium molestias, officia possimus quos unde. Cum, ea,
            minima!
        </div>
        <div>Cum eaque ipsa itaque nam officiis tenetur vitae voluptates? Fuga magni maiores nobis praesentium sunt.
            Alias eaque impedit ullam! Aliquid dolorem doloremque est, eum fugiat inventore laborum libero perspiciatis
            ullam?
        </div>
        <div>Dolorem ea iure perferendis quasi sint sunt velit vero! Assumenda officiis, velit. Dolores expedita ipsa
            natus neque non nulla repudiandae soluta veritatis? Corporis et eveniet iure nostrum quas quod vero?
        </div>
        <div>At, consequuntur, corporis doloremque et eveniet excepturi explicabo fuga fugiat laboriosam minima
            necessitatibus nesciunt nulla pariatur, perferendis provident soluta tempore tenetur unde? Amet cum ipsa
            ipsum libero maiores quasi sint!
        </div>
        <div>Accusamus aliquam ducimus esse ex iusto libero, nostrum porro quidem, similique sint soluta, unde! Commodi
            consequuntur cumque magnam molestias optio pariatur possimus quam repellendus sequi, sit sunt suscipit
            temporibus voluptas!
        </div>
        <div>Consequuntur, delectus dolor incidunt inventore nam placeat repellat reprehenderit. Adipisci, aliquam
            blanditiis corporis culpa dolor eligendi nihil nulla optio perferendis qui quibusdam quisquam suscipit
            tenetur veniam voluptate. Cupiditate dicta, maxime!
        </div>
        <div>Animi aut dicta eligendi et expedita, pariatur quasi quod! Corporis necessitatibus nulla omnis quasi quo
            repudiandae. Animi commodi corporis eaque eum explicabo facilis quos. Aperiam saepe, vitae! Commodi cum,
            nesciunt.
        </div>
    </div>
    </div>
    <script>
        let btn2=document.querySelector('#id2');
        btn2.addEventListener('click',function (){
            alert('按钮2被点击了')
        })

        let spanE=document.querySelector('span');
        spanE.addEventListener('mouseover',function (){
            console.log('用户查看了');
        })
        //窗口滚动事件
        window.addEventListener('scroll',function (){
            alert('用户滚动了页面');
        })
        //窗口重置事件
        window.addEventListener('resize',function (){
            alert('用户调整了窗口大小');
        })

        document.addEventListener('visibilitychange',function (){
            if(document.visibilityState ==='hidden'){
                console.log('用户离开了页面')
            }else{
                console.log('用户返回了页面')
            }
        })
    </script>
</body>
</html>